<template>
  <view>
    <image class="bg" :src="appImgs.bg_1" mode="aspectFill"></image>
    <view class="box">
      <view class="h-flex-y h-flex-center">
        <view style="padding-top: 150rpx">
          <image
            src="/static/imgs/ico.jpeg"
            mode="aspectFill"
            class="ico"
          ></image>
        </view>
        <view style="margin: 100rpx 0 30rpx 0; width: 100%; text-align: center">
          <view v-if="userInfo._id">
            已闯过<text style="padding: 0 10rpx; color: #ff5722">{{
              userInfo.pass
            }}</text
            >关
          </view>
        </view>
        <image
          :src="appImgs.btn_3"
          mode="aspectFit"
          @tap="startGame"
          class="start transform-scale"
        ></image>
        <view style="margin-top: 60rpx" class="h-flex-x">
          <image
            :src="appImgs.btn_1"
            mode="aspectFit"
            @tap="lookTop"
            class="start transform-scale"
          ></image>
        </view>
      </view>
    </view>

    <view
      class="global-popup signIn-pop"
      :style="{ display: signIn.show ? 'block' : 'none' }"
    >
      <view class="shade"></view>
      <view class="content">
        <image :src="appImgs.img_2" mode="aspectFit"></image>
        <view>
          <view class="h-flex-x h-flex-center" style="margin-bottom: 100rpx">
            <view>
              <image
                class="gold"
                :src="appImgs.icon_1"
                mode="aspectFit"
              ></image>
            </view>
            <view style="margin: 0 0 0 10rpx; color: #ff5722; font-size: 48rpx"
              >+</view
            >
            <view style="color: #ff5722; font-size: 64rpx">20</view>
          </view>
          <image
            class="btn transform-scale"
            :src="appImgs.btn_8"
            mode="aspectFit"
            @tap="onSignIn"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  login,
  getUserInfo,
  signInfo,
  getUserJb,
  updataUser,
} from "@/api/user/index.js";
import store from "@/store/index.js";

export default {
  components: {},
  data() {
    return {
      userInfo: {},
      signIn: {
        show: false,
      },
      appImgs: {},
    };
  },
  onLoad() {
    this.appImgs = uni.$hl.getAppImgs();
  },
  onShow() {
    if(uni.$hl.isLogin()){
      console.log(11111);
				this.userInfo = uni.$hl.getUserInfo();
				this.updateInfo();
			}
  },
  methods: {
    	// 开始游戏
			startGame(){
				if(!uni.$hl.isLogin()){
					uni.navigateTo({
						url:'/pages/user/login'
					})
					return;
				}
				uni.navigateTo({
					url:'/pages/index/play'
				})
			},



    startGame() {
      if (!uni.$hl.isLogin()) {
        uni.login({
          provider: "weixin",
          onlyAuthorize: true,
          success: (re) => {
            var postData = {
              clientId: "d445a0db7cb73f2ecd24da4812aced41",
              grantType: "xcx",
              tenantId: "000000",
              xcxCode: re.code,
            };
            uni.getUserInfo({
              provider: "weixin",
              success: function (infoRes) {
                var useData = {
                  avatar: infoRes.userInfo.avatarUrl,
                  nickName: infoRes.userInfo.nickName,
                  sex: "1",
                };
                updataUser(useData).then((res) => {});
              },
            });
            login(postData).then((res) => {
              uni.$hl.showLoading("自动登录中");
              if (res.data.code == 200) {
                store.commit("setToken", res.data.data.access_token);
                uni.setStorageSync(
                  "token",
                  JSON.stringify(res.data.data.access_token)
                );
                store.commit("setClientId", res.data.data.client_id);
                this.updateInfo();
              } else {
                uni.hideLoading();
                uni.$hl.showToast("登录失败，请重试");
              }
            });
          },
          fail: (err) => {
            uni.hideLoading();
            console.log(err);
            uni.showToast({
              title: "微信登录授权失败",
              icon: "none",
            });
          },
        });
      }
      uni.navigateTo({
        url: "/pages/index/play",
      });
    },
    // 排行榜
    lookTop() {
      uni.navigateTo({
        url: "/pages/index/top",
      });
    },
    updateInfo() {
      var postData = {
        tenantId: "000000",
        clientId: store.getters.clientId,
      };
      getUserInfo(postData).then((res) => {
        if (res.data.code == 200) {
          this.userInfo = res.data.data.user;
          uni.hideLoading();
          getUserJb().then((res) => {
            this.userInfo.gold = res.data.data.money;
            this.userInfo.pass = res.data.data.pass;
            uni.$hl.setUserInfo(this.userInfo);
            if (res.data.data.sign === 0) {
              uni.setStorageSync("sign", "0");
              this.signInFn();
            } else {
              uni.setStorageSync("sign", "1");
              uni.hideLoading();
              uni.$hl.showToast("登录成功", "success");
              setTimeout(() => {
                uni.navigateTo({
                  url: "/pages/index/play",
                });
              }, 1500);
            }
          });
        } else {
          uni.hideLoading();
          uni.$hl.showToast("登录失败，请重试");
        }
      });
    },

    signInFn(type = "verify") {
      if (type == "verify") {
        this.signIn.show = true;
      }
      if (type == "signIn") {
        this.signIn.show = false;
        signInfo().then((res) => {
          this.updateInfo();
          uni.$hl.showToast("领取成功", "success");
          setTimeout(() => {
            uni.hideLoading();
            uni.navigateTo({
              url: "/pages/index/play",
            });
          }, 1500);
        });
      }
    },
    onSignIn() {
      uni.$hl.showLoading("领取中");
      this.signInFn("signIn");
    },
  },
};
</script>

<style lang="scss">
.bg {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.box {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: var(--status-bar-height);

  .ico {
    display: block;
    width: 320rpx;
    height: 320rpx;
    border-radius: 60rpx;
  }

  > view {
    height: 100%;
  }

  .start {
    display: block;
    width: 320rpx;
    height: 90rpx;
    margin: 0 10rpx;
  }
}

// 签到
.signIn-pop {
  .content {
    width: 750rpx;
    height: 900rpx;

    > image {
      width: 100%;
      height: 100%;
    }

    > view {
      position: absolute;
      top: 500rpx;
      left: 20%;
      width: 60%;
      font-size: 32rpx;
      color: #345;
    }

    .gold {
      width: 40rpx;
      height: 40rpx;
    }

    .btn {
      width: 320rpx;
      height: 90rpx;
      margin: 20rpx auto 0 auto;
    }
  }
}
</style>
